<template>
    <div class="container">
        <Breadcrumb :items="['menu.common', 'menu.common.comment']" />
        <a-card :title="$t('menu.common.comment')">

            <a-space fill direction="vertical">
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-space fill>
                            <a-input-search
                                v-model="searchForm.content"
                                placeholder="搜索点评内容"
                                style="width: 300px"
                                @search="handleSearch"
                                @clear="handleSearch"
                            />
                        </a-space>
                    </a-col>
                    <a-col :flex="1">
                        <a-space align="end" style="justify-content: flex-end;" fill>
                            <a-button shape="circle" @click="fetchData">
                                <template #icon><icon-refresh /></template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>

                <a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
                    @page-change="onPageChange" @page-size-change="onPageSizeChange">
                    <template #columns>
                        <a-table-column title="ID" data-index="id" :width="80" />
                        <a-table-column title="类型" data-index="type_name" :width="120" />
                        <a-table-column title="订单ID" data-index="item_id" :width="80" />
                        <a-table-column title="用户" data-index="user" :width="120">
                            <template #cell="{ record }">
                                <div v-if="record.user">
                                    <div>{{ record.user.nickname }}</div>
                                    <div style=" color: #999;">{{ record.user.phone }}</div>
                                </div>
                                <span v-else>-</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="商品" data-index="goods_name" :width="200">
                            <template #cell="{ record }">
                                <span v-if="record.goods_name">{{ record.goods_name }}</span>
                                <span v-else>-</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="商家" data-index="biz" :width="120">
                            <template #cell="{ record }">
                                <span v-if="record.biz">{{ record.biz.name }}</span>
                                <span v-else>-</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="订单号" data-index="order" :width="150">
                            <template #cell="{ record }">
                                <span v-if="record.order">{{ record.order.order_no }}</span>
                                <span v-else>-</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="评分" data-index="rating" :width="100">
                            <template #cell="{ record }">
                                <a-rate :model-value="record.star" size="mini" readonly :count="5" />
                            </template>
                        </a-table-column>
                        <a-table-column title="点评内容" data-index="content" :width="300">
                            <template #cell="{ record }">
                                <a-typography-paragraph :ellipsis="{ rows: 2, showTooltip: true }">
                                    {{ record.content }}
                                </a-typography-paragraph>
                                <div v-if="record.biz_reply" style="margin-top: 5px; color: #666;">
                                    <span style="color: #1890ff;">商家回复:</span> {{ record.biz_reply }}
                                </div>
                                <div v-if="record.system_reply" style="margin-top: 5px; color: #666;">
                                    <span style="color: #52c41a;">平台回复:</span> {{ record.system_reply }}
                                </div>
                            </template>
                        </a-table-column>
                        <a-table-column title="图片" data-index="images" :width="120">
                            <template #cell="{ record }">
                                <a-space v-if="record.images && record.images.length > 0" size="mini">
                                    <a-image
                                        v-for="(img, index) in record.images.slice(0, 3)"
                                        :key="index"
                                        :src="img"
                                        :width="40"
                                        :height="40"
                                        fit="cover"
                                        :preview="true"
                                    />
                                    <span v-if="record.images.length > 3" style="font-size: 12px; color: #999;">
                                        +{{ record.images.length - 3 }}
                                    </span>
                                </a-space>
                                <span v-else>-</span>
                            </template>
                        </a-table-column>
                        <a-table-column title="创建时间" data-index="created_at" :width="180" />
                        <a-table-column title="操作" align="center" :width="250">
                            <template #cell="{ record }">
                                <a-space size="mini">
                                    <a-link @click="openDetail(record)">
                                        详情
                                    </a-link>
                                    <a-link @click="openBizReply(record)">
                                        商家回复
                                    </a-link>
                                    <a-link @click="openSystemReply(record)">
                                        平台回复
                                    </a-link>
                                    <a-popconfirm position="left" content="确定要删除这个点评吗？" @ok="handleDelete(record.id)">
                                        <a-link>
                                            删除
                                        </a-link>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </a-space>
        </a-card>

        <a-modal v-model:visible="detailVisible" draggable title="点评详情" @cancel="closeDetail" :width="800" :footer="false">
            <div v-if="detailData">
                <a-descriptions :column="2" bordered>
                    <a-descriptions-item label="ID">{{ detailData.id }}</a-descriptions-item>
                    <a-descriptions-item label="评分">
                        <a-rate :model-value="detailData.star" readonly :count="5" />
                    </a-descriptions-item>
                    <a-descriptions-item label="用户">
                        <span v-if="detailData.user">{{ detailData.user.nickname }} ({{ detailData.user.phone }})</span>
                        <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="商家">
                        <span v-if="detailData.biz">{{ detailData.biz.name }}</span>
                        <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="订单号">
                        <span v-if="detailData.order">{{ detailData.order.id }}</span>
                        <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="创建时间">{{ detailData.created_at }}</a-descriptions-item>
                    <a-descriptions-item label="点评内容" :span="2">
                        {{ detailData.content }}
                    </a-descriptions-item>
                    <a-descriptions-item label="商家回复" :span="2" v-if="detailData.biz_reply">
                        <div style="background: #f5f5f5; padding: 10px; border-radius: 4px;">
                            {{ detailData.biz_reply }}
                        </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="平台回复" :span="2" v-if="detailData.system_reply">
                        <div style="background: #e6f7ff; padding: 10px; border-radius: 4px;">
                            {{ detailData.system_reply }}
                        </div>
                    </a-descriptions-item>
                    <a-descriptions-item label="图片" :span="2" v-if="detailData.images && detailData.images.length > 0">
                        <a-space wrap>
                            <a-image
                                v-for="(img, index) in detailData.images"
                                :key="index"
                                :src="img"
                                :width="100"
                                :height="100"
                                fit="cover"
                                :preview="true"
                            />
                        </a-space>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </a-modal>

        <!-- 商家回复弹窗 -->
        <a-modal v-model:visible="bizReplyVisible" title="商家回复" @before-ok="handleBizReply" @cancel="closeBizReply" :width="600">
            <a-form :model="bizReplyForm" ref="bizReplyFormRef" layout="vertical">
                <a-form-item field="reply" label="回复内容" :rules="[{ required: true, message: '请输入回复内容' }]">
                    <a-textarea v-model="bizReplyForm.reply" placeholder="请输入商家回复内容" :rows="6" />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 平台回复弹窗 -->
        <a-modal v-model:visible="systemReplyVisible" title="平台回复" @before-ok="handleSystemReply" @cancel="closeSystemReply" :width="600">
            <a-form :model="systemReplyForm" ref="systemReplyFormRef" layout="vertical">
                <a-form-item field="reply" label="回复内容" :rules="[{ required: true, message: '请输入回复内容' }]">
                    <a-textarea v-model="systemReplyForm.reply" placeholder="请输入平台回复内容" :rows="6" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { queryPayPingList, queryPayPingOne, delPayPing, bizReply, systemReply, PayPingRecord, PayPingParams } from '@/api/payPing';

const { loading, setLoading } = useLoading(true);
const detailVisible = ref(false);
const detailData = ref<PayPingRecord | null>(null);
const bizReplyVisible = ref(false);
const systemReplyVisible = ref(false);
const bizReplyFormRef = ref();
const systemReplyFormRef = ref();

const basePagination = {
    current: 1,
    pageSize: 10,
    total: 0,
};

const pagination = reactive({
    ...basePagination,
});

const searchForm = reactive({
    content: '',
});

const bizReplyForm = reactive({
    id: 0,
    reply: '',
});

const systemReplyForm = reactive({
    id: 0,
    reply: '',
});

const renderData = ref<PayPingRecord[]>([]);

const fetchData = async () => {
    setLoading(true);
    try {
        const params: PayPingParams = {
            current: pagination.current,
            pageSize: pagination.pageSize,
        };
        
        if (searchForm.content) {
            params.content = searchForm.content;
        }
        
        const res = await queryPayPingList(params);
        renderData.value = res.data.list;
        pagination.total = res.data.total;
    } catch (err) {
        Message.error('获取点评列表失败');
    } finally {
        setLoading(false);
    }
};

const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
};

const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.current = 1;
    fetchData();
};

const handleSearch = () => {
    pagination.current = 1;
    fetchData();
};

const openDetail = async (record: PayPingRecord) => {
    try {
        const res = await queryPayPingOne({ id: record.id });
        detailData.value = res.data;
        detailVisible.value = true;
    } catch (err) {
        Message.error('获取详情失败');
    }
};

const closeDetail = () => {
    detailVisible.value = false;
    detailData.value = null;
};

const handleDelete = async (id: number) => {
    try {
        await delPayPing(id);
        Message.success('删除成功');
        fetchData();
    } catch (err) {
        Message.error('删除失败');
    }
};

const openBizReply = (record: PayPingRecord) => {
    bizReplyForm.id = record.id;
    bizReplyForm.reply = record.biz_reply || '';
    bizReplyVisible.value = true;
};

const closeBizReply = () => {
    bizReplyVisible.value = false;
    bizReplyForm.id = 0;
    bizReplyForm.reply = '';
};

const handleBizReply = async (done: any) => {
    try {
        await bizReply(bizReplyForm.id, bizReplyForm.reply);
        Message.success('商家回复成功');
        closeBizReply();
        fetchData();
        done(true);
    } catch (err) {
        done(false);
    }
};

const openSystemReply = (record: PayPingRecord) => {
    systemReplyForm.id = record.id;
    systemReplyForm.reply = record.system_reply || '';
    systemReplyVisible.value = true;
};

const closeSystemReply = () => {
    systemReplyVisible.value = false;
    systemReplyForm.id = 0;
    systemReplyForm.reply = '';
};

const handleSystemReply = async (done: any) => {
    try {
        await systemReply(systemReplyForm.id, systemReplyForm.reply);
        Message.success('平台回复成功');
        closeSystemReply();
        fetchData();
        done(true);
    } catch (err) {
        done(false);
    }
};

onMounted(() => {
    fetchData();
});
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}
</style>

<script lang="ts">
export default {
    name: 'CommonComment',
};
</script>
